Hi Guys,

Here is my scenario: 

I want a user to be able to insert a YouTube link within the umbraco UI - this link is to populate the href of an anchor - this anchor will wrap an html image and once clicked on ( in the front end ) fancybox will trigger a pop up with the video inside.

Here is my code so far: 

  <xsl:for-each select="$currentPage">
    <div id="video-wrap">
      <a href="{videoLink}">
        <xsl:if test="videoThumbnail &gt; 0">
          <xsl:variable name="img" select="umbraco.library:GetMedia(videoThumbnail, 0)" />
          <xsl:variable name="imgPath" select="concat(substring-before($img/umbracoFile,'.'), '.jpg')" />
          <img class="" src="/ImageGen.ashx?image={$imgPath}&amp;" alt="{@nodeName}" />
        </xsl:if>
      </a>
    </div>
  </xsl:for-each>

So this all works well and is doing exactly as I want in terms of rendering the image, the href is populating etc the only issue is that when I click on the image on the front end, fancybox triggers but I'm redirected to YouTube to watch the video.

I am wanting to be able to watch the video inside the fancybox.

Here is my Jquery code: 

$("#video-wrap a").click(function() {

   $.fancybox({

        'width': 680,

        'height': 495,

        'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),

        'type': 'swf',

        'wmode': 'transparent',

        'allowfullscreen': true

     });

});

Any suggetsions? 

Jordy